<script setup lang="ts">
import { STORAGE_MODES_OPTIONS } from '@/mixins/StatisticalIndicators/MixinStatisticalIndicators'

import type {
  STORAGE_MODES,
} from '@/enum/modules/indicator'
import type { StatisticalIndicator } from '@/types/modules/statistical-indicator'

const props = defineProps<{
  mode: StatisticalIndicator['storageMode']
}>()

const data = computed(() => {
  const mode = unref(props.mode)
  /** 时间类型的反选 */
  const result: {
    collect: string[]
    entry: string[]
    calculate: string[]
    statistic: string[]
  } = {
    collect: [],
    entry: [],
    calculate: [],
    statistic: [],
  }
  for (const key in mode) {
    const data
      = mode[
        key as keyof StatisticalIndicator['storageMode']
      ]
    result[key as keyof typeof result] = data.map(v =>
      getLabel(v),
    )
  }
  return result
})

function getLabel(t: STORAGE_MODES): string {
  const target = STORAGE_MODES_OPTIONS.find(
    item => item.value === t,
  )
  return target?.label || ''
}
</script>

<template>
  <div class="cell-container">
    <div class="align-center cell-item flex">
      <div class="cell-title">
        采集：
      </div>
      <div v-if="data.collect.length > 0" class="cell-content">
        <ElTag
          v-for="item in data.collect"
          :key="item"
          size="small"
        >
          {{ item }}
        </ElTag>
      </div>
      <div v-else class="cell-content">
        无
      </div>
    </div>
    <div class="cell-item align-center flex">
      <div class="cell-title">
        录入：
      </div>
      <div v-if="data.entry.length > 0" class="cell-content">
        <ElTag
          v-for="item in data.entry"
          :key="item"
          size="small"
          type="success"
        >
          {{ item }}
        </ElTag>
      </div>
      <div v-else class="cell-content">
        无
      </div>
    </div>
    <div class="cell-item align-center flex">
      <div class="cell-title">
        计算公式：
      </div>
      <div v-if="data.calculate.length > 0" class="cell-content">
        <ElTag
          v-for="item in data.calculate"
          :key="item"
          size="small"
          type="warning"
        >
          {{ item }}
        </ElTag>
      </div>
      <div v-else class="cell-content">
        无
      </div>
    </div>
    <div class="cell-item align-center flex">
      <div class="cell-title">
        统计公式：
      </div>
      <div v-if="data.statistic.length > 0" class="cell-content">
        <ElTag
          v-for="item in data.statistic"
          :key="item"
          size="small"
          type="danger"
        >
          {{ item }}
        </ElTag>
      </div>
      <div v-else class="cell-content">
        无
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.cell-item + .cell-item {
  margin-top: 6px;
}
.cell-title {
  flex-shrink: 0;
  width: 80px;
  text-align: right;
}
.cell-content {
  :deep(.el-tag + .el-tag) {
    margin-left: 5px;
  }
}
</style>
